<template>
  <div>
    <Header :backApp="true" contentTitle="志愿填报"></Header>
    <div class="study-home-wrapper">
      <scroller>
        <div class="home">
          <div class="wheel-planting swiper-container" id="bannerSwiper">
            <!-- <div class="swiper-wrapper">
              <div class="swiper-slide couSlider" v-for="i in bannerList" :key="i.id" @click="gouri(i)"> -->
            <!-- <img class="imgs" :src="i.image" alt /> -->
            <img class="imgBanners" src="https://static.shengxue985.com/oss/import/banner/banner_volunteer.png" alt />
            <!-- </div>
            </div> -->
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
          </div>
          <div class="subtitle flex-h">
            <span class="flex1">服务类别</span>
            <!-- <i></i> -->
          </div>
          <div class="goodsBar flex-h">
            <span class="flex1 volunteer01"><b>智能填报</b><i>258元</i></span>
            <span class="flex1 volunteer02"><b>录取概率查询</b><i>20元</i></span>
          </div>
          <div class="goodsBar flex-h">
            <span class="flex1 volunteer03"><b>专家电话服务</b><i>1980元</i></span>
            <span class="flex1 volunteer04"><b>专家面对面服务</b><i>3980元</i></span>
          </div>

          <div class="advertBoxse flex-h">
            <span class="flex1">使用功能</span>
            <div class="right"><b>开始填报</b><img src="~/static/images/com_icon_arrow_right_white_40.png" alt="" /></div>
          </div>
          <img class="imgtilte" src="~/static/images/title01.png" alt="" />
          <div class="subtitle flex-h">
            <span class="flex1 smallsize">高校招生</span>
            <!-- <i></i> -->
          </div>
          <div style="height: 0.5rem;"></div>
          <college-enrollment :infoList="infoList" :liveList="liveList" :advisoriesList="advisoriesList" :topicList="topicList" :imgTextTopic="imgTextTopic" :videoTopic="videoTopic"></college-enrollment>
          <img class="imgtilte" src="~/static/images/title02.png" alt="" />

          <div class="subtitle flex-h" @click="$router.push({ path: 'consultationList?state=1' })">
            <span class="flex1 smallsize">升学在线咨询会</span>
            <i></i>
          </div>
          <div class="activity-imgs-box flex-h">
            <div class="img-box swiper-slide" v-for="(i, index) in getSxActivityData" :key="i.id" v-show="index < 2">
              <div class="img-list" @click="$router.push({ path: 'consultationDetail?id=' + i.id })">
                <img :src="i.imgUrl" alt />
                <span>{{ i.title }}</span>
              </div>
            </div>
          </div>
          <div class="subtitle flex-h" @click="$router.push({ path: 'consultationList?state=0' })">
            <span class="flex1 smallsize">其他咨询会</span>
            <i></i>
          </div>
          <div class="activity-imgs-box flex-h">
            <div class="img-box swiper-slide" v-for="(i, index) in getActivityData" :key="i.id" v-show="index < 2">
              <div class="img-list" @click="$router.push({ path: 'consultationDetail?id=' + i.id })">
                <img :src="i.imgUrl" alt />
                <span>{{ i.title }}</span>
              </div>
            </div>
          </div>
          <!-- 研学资讯 -->
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
import Header from '~/components/topHeader'
import { getResearchBanner, getRecommendResearchActivity, getConsultationList } from '~/api/identity'
import { getInfos, getProvinces, getLives, getAdvisories, getTopics } from '~/api/school'
import collegeEnrollment from '~/components/collegeEnrollment'
import ls from 'store2'
export default {
  components: {
    Header,
    collegeEnrollment,
  },
  data() {
    return {
      bannerList: [1, 2],
      getActivityData: [1, 2],
      recommendList: [],
      infoList: [],
      videoTopic: [],
      imgTextTopic: [],
      liveList: [],
      topicList: [],
      advisoriesList: [],
      getSxActivityData: [],
    }
  },
  creadted() {},
  mounted() {
    this.$visit('volunteer/home')
    this.getAppMsg()
    // this.getActivityList()
    // this.getBannerList()
    this.getResult()
    this.getSxConsultation(1)
    this.getSxConsultation(0)
  },
  methods: {
    getSxConsultation(type) {
      let obj = {
        pageNo: 1,
        pageSize: 2,
        isSxConference: type,
        isRecommend: 1,
      }
      getConsultationList(obj).then((res) => {
        if (type === 1) {
          this.getSxActivityData = res.data.list
        } else {
          this.getActivityData = res.data.list
        }
      })
    },
    async getResult() {
      let provincesList = await this.getProvinces()
      if (ls.get('userArea')) {
        provincesList.forEach((item) => {
          if (item.label === ls.get('userArea')) {
            this.provincesId = item.id
          }
        })
      } else {
        this.provincesId = 0
      }
      sessionStorage.setItem('provincesId', this.provincesId)
      let infos = await this.getInfos(1, 5, this.provincesId)
      this.infoList = infos.data
      let lives = await this.getLives(2,1, 5) 
      this.liveList = lives.data
      let advisories = await this.getAdvisories(1, 5, this.provincesId, '')
      this.advisoriesList = advisories.data
      let topics = await this.getTopics()
      this.topicList = topics.recommends.map((item) => {
        return {
          isTopic: true,
          commodityType: 3,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.videoTopic = topics.videos.map((item) => {
        return {
          isTopic: true,
          commodityType: 1,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.imgTextTopic = topics.graphs.map((item) => {
        return {
          isTopic: true,
          commodityType: 2,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.isLoadAll = true
    },
    getTopics() {
      return getTopics()
    },
    getAdvisories(page, limit, povId, search) {
      return getAdvisories(page, limit, povId, search)
    },
    getLives(type,page, limit) {
      return getLives(type,page, limit)
    },
    getProvinces() {
      return getProvinces()
    },
    getInfos(a, b, c) {
      return getInfos(a, b, c)
    },
    backToApp() {
      if (this.checkTerminal() === 'ios') {
        window.webkit.messageHandlers.backMessage.postMessage('back')
      } else if (this.checkTerminal() === 'android') {
        ZMParentsJsToAndroid.backMessage('back')
      } else {
      }
    },
    getAppMsg() {
      // let token = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAxNzQ1NzE0IiwidXNlcklkIjoiMTc0NTcxNCIsImZyb20iOiJhcHAiLCJuYmYiOjE1Njc2NDY3MzF9.tNLyMBG-kMw65WKeeCDD6do2vhefGRZR9CgPgYWJDMdjATQq1HCPMf_0EMMuVtPmqVUAMHoGFR-xPdUGUQX-aE2I7JCX4prAenxOeXhTGfT7Fn8NG9T3hnw96o5OJKcbKPSMrzumidMH392M1RPIL_z451bqB5sGrpy0_7vpyzY"
      if (this.checkTerminal() === 'ios') {
        let iOSInfos = window.iOSInfo
        if (Object.keys(iOSInfos).length > 0) {
          ls.set('tokensyxk', iOSInfos.tokens)
        }
      } else if (this.checkTerminal() === 'android') {
        let data = window.ZMParentsJsToAndroid.getZyMsg()
        let androidData = JSON.parse(data)
        ls.set('tokensyxk', androidData.tokens)
      } else {
        //  ls.set("tokensyxk", token);
        //do nothing
      }
    },
    checkTerminal() {
      var u = navigator.userAgent
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/)
      var isWechat = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' || u.match(/_SQ_/i) == '_sq_'
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/)
      var isiOS = !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/)
      if (isWechat) {
        return 'wechat'
      } else if (isiOS) {
        return 'ios'
      } else if (isAndroid) {
        return 'android'
      }
    },
    getCaption(obj) {
      var index = obj.lastIndexOf('=')
      obj = obj.substring(index + 1, obj.length)
      return obj
    },
    goCourseDetail(item) {
      if (this.checkTerminal() == 'ios') {
        window.webkit.messageHandlers.goCourseDetail.postMessage(item)
      } else if (this.checkTerminal() == 'android') {
        ZMParentsJsToAndroid.goCourseDetail(JSON.stringify(item))
      } else {
        // do nothing
      }
    },
    gouri(item) {
      let ure = item.link
      if (ure.indexOf('shengxue://infomationDetail') > -1 || ure.indexOf('shengxue://lessonDetail') > -1) {
        this.goCourseDetail(item)
      } else {
        window.location.href = ure
      }
    },
    getBannerList() {
      getResearchBanner()
        .then((res) => {
          this.bannerList = res.data
          this.$nextTick(() => {
            //  this.activitySwip();
            this.bannerSwip()
          })
        })
        .catch((error) => {})
    },
    bannerSwip() {
      let mySwiper = new Swiper('#bannerSwiper', {
        loop: true,
        autoplay: true,

        autoplay: {
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          bulletElement: 'li',
        },
      })
    },
    activitySwip() {
      let mySwiper = new Swiper('#activitySwiper', {
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
      })
    },

    // getActivityList() {
    //   getRecommendResearchActivity()
    //     .then((res) => {
    //       console.log('res1111: ', res)
    //       this.getActivityData = res.data
    //       this.$nextTick(() => {
    //         this.activitySwip()
    //       })
    //     })
    //     .catch((error) => {})
    // },
  },
}
</script>

<style scoped lang="less">
.study-home-wrapper {
  width: 100%;
  height: 100vh;
  margin-top: -0.88rem;
  background: #fff;
}
.home {
  width: 100%;
  height: auto;
  background: #fff;
  padding-top: 0.88rem;
  box-sizing: border-box;
  padding-bottom: 1rem;
  .wheel-planting {
    width: 100%;
    height: 3.2rem;
    box-sizing: border-box;
    .imgBanners {
      width: 6.9rem;
      height: auto;
      margin: 0 auto;
      display: block;
    }
    .swiper-pagination-bullet {
      width: 0.16rem;
      height: 0.04rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
      border-radius: 2px;
    }
    .couSlider {
      width: 100%;
      height: 100%;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0.1rem;
        background: url('~@/static/header.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .goodsBar {
    width: 100%;
    height: auto;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    span {
      height: 1.64rem;

      border-radius: 0.08rem;
      line-height: 1.64rem;
      margin-right: 0.2rem;
      padding-left: 0.3rem;
      b,
      i {
        display: block;
        text-align: left;
      }
      b {
        font-size: 0.34rem;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        margin-top: 0.3rem;
      }
      i {
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .volunteer01 {
      background: url('~/static/images/volunteer01.png') no-repeat;
      background-size: 100% 100%;
    }
    .volunteer02 {
      background: url('~/static/images/volunteer02.png') no-repeat;
      background-size: 100% 100%;
    }
    .volunteer03 {
      background: url('~/static/images/volunteer03.png') no-repeat;
      background-size: 100% 100%;
    }
    .volunteer04 {
      background: url('~/static/images/volunteer04.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .advertBoxse {
    width: 6.9rem;
    height: 1.6rem;
    background: rgba(255, 214, 61, 1);
    border-radius: 0.16rem;
    margin: 0.5rem auto;
    padding-right: 0.4rem;
    padding-left: 0.6rem;
    box-sizing: border-box;
    span {
      font-size: 0.36rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .right {
      width: 2rem;
      height: 0.8rem;
      text-align: center;
      line-height: 0.8rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.4rem;
      b {
        font-size: 0.28rem;
        font-weight: 500;
        color: rgba(255, 173, 13, 1);
        vertical-align: middle;
      }
      img {
        vertical-align: middle;
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.1rem;
      }
    }
  }
  .imgtilte {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .subtitle {
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: 0.8rem;
    span {
      font-size: 0.4rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.8rem;
    }
    i {
      width: 0.6rem;
      height: 0.6rem;
      display: inline-block;
      background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
      background-size: 4.5rem 3.6rem;
    }
    .smallsize {
      font-size: 0.34rem;
    }
  }
  .activity-imgs-box {
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: 2.8rem;
    overflow: hidden;
    margin-top: 0.2rem;
    flex-wrap: wrap;
    justify-content: space-between;
    .img-box {
      width: 3.2rem;
      height: 2.8rem;
    }
    .img-list {
      width: 3rem;
      height: 2.8rem;
      img {
        display: block;
        width: 3rem;
        height: 2rem;
        border-radius: 0.1rem;
        background: url('~@/static/header.png') no-repeat;
        background-size: 100% 100%;
      }
      span {
        display: block;
        height: 0.6rem;
        font-size: 0.28rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .activity-info-box {
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .study-info {
      width: 100%;
      height: auto;
      padding: 0.2rem 0;
      border-bottom: 1px solid rgba(235, 235, 235, 1);
      .title {
        display: block;
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(3, 3, 3, 1);
        line-height: 0.4rem;
      }
      .desc {
        margin-top: 0.2rem;
        .left {
          img {
            width: 0.2rem;
            height: 0.2rem;
          }
          i {
            font-size: 0.2rem;
            color: rgba(235, 78, 62, 1);
          }
        }

        .right {
          text-align: right;
          b {
            font-size: 0.24rem;
            color: rgba(28, 28, 29, 1);
          }
          em {
            font-size: 0.24rem;
            color: rgba(187, 187, 187, 1);
            margin-left: 0.1rem;
          }
        }
      }
    }
  }
}
.mgr-50 {
  margin-top: 0.5rem;
}
.product-box {
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.product-item {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;

  .list-box {
    width: 6.9rem;
    display: flex;
    margin-top: 0.4rem;
    font-size: 0.28rem;
    .goods-image {
      height: 2rem;
      width: 2rem;
      img {
        height: 100%;
        width: 100%;
        border-radius: 0.1rem;
      }
    }

    .goods-text {
      padding-left: 0.3rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .good-info-top {
        .goods-name {
          width: 100%;
          line-height: 0.4rem;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .type-icon {
          margin-top: 0.1rem;
          img {
            height: 0.36rem;
            width: 0.36rem;
          }
          b {
            background: linear-gradient(270deg, rgba(253, 45, 37, 1) 0%, rgba(251, 100, 35, 1) 100%);
            border-radius: 0.06rem;
            padding: 0.03rem 0.1rem;
            font-size: 0.24rem;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.33rem;
          }
        }
      }

      .good-info-bottom {
        .goods-price {
          font-size: 0.36rem;
          color: #eb4e3e;
          font-weight: 600;
          .price-icon {
            font-size: 0.296rem;
            padding-right: 0.1rem;
          }
          .origin-price {
            text-decoration: line-through;
            color: #c7c7c7;
            font-size: 0.26rem;
          }
        }
        .goods-about {
          font-size: 0.24rem;
          color: #bbbbbb;
          font-weight: 500;
          p {
            margin: 0.05rem 0 0.03rem 0;
            .seller {
              color: #222222;
            }
          }
        }
      }
    }
  }
}
</style>
